<nz-card #drawerPanel [ngStyle]="{ display: _isDisplay ? 'block' : 'none' }" nzTitle="属性配置" class="right-panel drawer">
  <div>
    <form nz-form [formGroup]="validateForm" class="mt20">
      <ng-container>
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="username" title="数据类型" nzRequired>数据类型</nz-form-label>
          <span style="width: 20px" nzFor="username"></span>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择数据类型!" style="height: 40px">
            <nz-input-group [nzSize]="'default'">
              <nz-select [nzSize]="'default'" id="datatypeId" formControlName="datatypeId" nzPlaceHolder="请数据类型">
                <nz-option *ngFor="let datatype of datatypeList" [nzValue]="datatype.value" [nzLabel]="datatype.label"></nz-option>
              </nz-select>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="username" title="横轴类型" nzRequired></nz-form-label>
          <span style="width: 20px" nzFor="username"></span>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择横轴类型!" style="height: 40px">
            <nz-input-group [nzSize]="'default'">
              <nz-select [nzSize]="'default'" id="fieldName" formControlName="fieldName" nzPlaceHolder="横轴类型">
                <nz-option *ngFor="let datatype of datatypeList" [nzValue]="datatype.value" [nzLabel]="datatype.label"></nz-option>
              </nz-select>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="username" title="" nzRequired></nz-form-label>
          <span style="width: 20px" nzFor="username"></span>
          <nz-form-control [nzSpan]="12" nzErrorTip="请选择横轴类型!" style="height: 40px">
            <nz-input-group [nzSize]="'default'">
              <nz-select [nzSize]="'default'" id="fieldName" formControlName="fieldName" nzPlaceHolder="横轴类型">
                <nz-option *ngFor="let datatype of datatypeList" [nzValue]="datatype.value" [nzLabel]="datatype.label"></nz-option>
              </nz-select>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
    </form>
  </div>
</nz-card>

<div
  (click)="showConfigPanel()"
  class="right-collapse"
  [ngStyle]="{ display: _isDisplay ? 'flex' : 'none' }"
  style="position: absolute; right: 299px; transform: translate(0px, -50%); transition: 0.5s ease-in-out"
>
  <span role="img" aria-label="double-right" class="anticon anticon-double-right">
    <i class="trigger" nz-icon [nzType]="'double-arrow-right'"></i>
  </span>
</div>
